<!--
缴费信息
-->
<template>
  <div class="app-container">
    <el-steps :space="200" :active="payInfo.status*1" finish-status="success" class="status">
      <el-step title="草稿"></el-step>
      <el-step title="未开始"></el-step>
      <el-step title="进行中"></el-step>
      <el-step title="已关闭"></el-step>
    </el-steps>
    <el-descriptions title="缴费信息" :column="4" size="medium " border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="handleUpdate">编辑</el-button>
      </template>
      <el-descriptions-item :span="2" label-class-name="my-label" content-class-name="my-content">
        <template slot="label"> 缴费说明</template>
        {{ payInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item :span="2" label-class-name="my-label" content-class-name="my-content">
        <template slot="label">学期</template>
        <el-tag size="small"> {{ payInfo.semesterYear + "  " + (dict.label.semester[payInfo.semester]) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
        <template slot="label">学校</template>
        {{ payInfo.school }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
        <template slot="label"> 学院</template>
        {{ payInfo.college }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
        <template slot="label"> 专业</template>
        {{ payInfo.major }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
        <template slot="label"> 班级</template>
        {{ payInfo.clazz }}
      </el-descriptions-item>
      <el-descriptions-item v-if="payInfo.other==='SPECIAL'" :span="4" label-class-name="my-label" content-class-name="my-content">
        <template slot="label"> 应收费</template>
        {{ '￥'+ (payInfo.pricesum/100).toFixed(2)}}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 添加或修改数目清单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="170px">
        <el-form-item label="类型" prop="other">
          <el-radio-group v-model="form.other">
            <el-radio-button
              v-for="dict in dict.type.pay_order_type"
              :key="dict.value"
              :label="dict.value"
              disabled
            >{{ dict.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.name" placeholder="请输入标题"/>
        </el-form-item>
        <el-form-item label="学期" prop="semesterYear" style="margin-right: 10px;">
          <el-col :span="8">
            <el-date-picker style="width: 100px;" v-model="form.semesterYear" type="year" value-format="yyyy"
                            placeholder="选择学年"/>
          </el-col>
          <el-col class="line" :span="8"></el-col>
          <el-col :span="12">
            <el-radio-group v-model="form.semester">
              <el-radio-button
                v-for="dict in dict.type.semester"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}
              </el-radio-button>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="班级" prop="deptId">
          <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-input v-model="form.grade" placeholder="请输入年级"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>


import {addBookList, getBookList, updateBookList} from "@/api/uniquefees/bookList";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {deptSchoolTreeSelect} from "@/api/campus/Org";

export default {
  props: {
    value: [String, Object, Array]
  },
  name: "UfInfo",
  components: {Treeselect},
  dicts: ['semester', 'pay_order_type'],
  data() {
    return {
      listId: '',
      payInfo: {},
      title:"",
      // 部门树选项
      deptOptions: [],
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        semesterYear: [
          {required: true, message: "学期年不能为空", trigger: "blur"}
        ],
        deptId: [
          {required: true, message: "班级不能为空", trigger: "blur"},
          {required: true, message: "班级不能为空", trigger: "blur"}
        ],
        name: [
          {required: true, message: "标题不能为空", trigger: "blur"}
        ],
      },
    };
  },
  created() {
    this.getDeptTree();
    this.listId = this.value
    this.getInfo();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptSchoolTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 修改按钮操作 */
    handleUpdate() {
      this.form = {...this.payInfo}
      this.open = true;
      this.title = "设置缴费信息";
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBookList(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getInfo();
            });
          } else {
            addBookList(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getInfo();
            });
          }
        }
      });
    },
    getInfo() {
      getBookList(this.listId).then(response => {
        this.payInfo = response.data;
      });
    },
  }
}
;
</script>

<style>
.status {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 10vh; /* 为了示例高度设为视口高度 */
}

.my-label {
  text-align: center;
  min-width: 120px;
  word-break: break-all;
}

.my-content {
  color: #000;
  text-align: center;
  font-weight: 600;
  height: 40px;
  min-width: 180px;
  word-break: keep-all;
}
</style>
